<template>
	<view class="flex-col homepage">
		<view class="flex-row wrapper">
			<u-picker :show="show" :columns="columns" @cancel="show=false" keyName="label" @confirm="eee"></u-picker>
			<view class="u-line-1 text" @click="show = true">缴费类别</view>
			<view class="wraper-col">
				<uni-icons type="bottom" size="15"></uni-icons>
			</view>
		</view>
		<view class="flex-row wrapper1">
			<uni-datetime-picker class="u-line-1 text" v-model="range" @change="shijian" type="daterange"
				@maskClick="maskClick">选择时间
			</uni-datetime-picker>
			<view class="wraper-col">
				<uni-icons type="bottom" size="15"></uni-icons>

			</view>
		</view>
		<view class="flex-row wrapper-two" v-for="(j,index) in Lifepayhistory" :key="index" @click="goxq(j)">
			<view class="wraper-col-two">
				<uni-icons style="top: 10rpx;left: 6rpx;" type="settings-filled" size="25"></uni-icons>
			</view>
			<view class="flex-col flex-row wraper-col-three">
				<view class="u-line-1 text-two">{{j.type}}</view>
				<view class="u-line-1 text-three">{{j.createTime}}</view>
			</view>
			<view class="u-line-1 text-four">{{j.prepaidNumber}}</view>
			<view class="u-line-1 text-five">-{{j.paymentAmount}}.00</view>
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				range: [],
				show: false,
				Lifepayhistory: {},
				start: '',
				end: '',
				user:{},
				columns: [
					[{
						label: '所有',
						id: 2,
						},
						{
							label: '水费',
							id: 1,
						}, {
							label: '电费',
							id: 3
						}, {
							label: '物业费',
							id: 4
						}, {
							label: '燃气费',
							id: 5
						}, {
							label: '宽带费',
							id: 6
						}, {
							id: 7,
							label: '暖气费',
						}
					]
				]
			}
		},
		onLoad() {
			this.ListAll()
		},
		methods: {
			goxq(j){
				uni.navigateTo({
					url: '/pages/gwb/Lifepayhistory1?j=' + JSON.stringify(j)
				})
			},
			
			shijian(data) {
				this.start = data[0]
				this.end = data[1]
				this.show1 = false
				this.ListAll()
			},
			ListAll(ccc) {
				console.log("到底是啥"+ccc)
				this.user = uni.getStorageSync('user')
				this.$axios({
					url: 'serverwg/gwb/Lifepayhistory',
					data: {
						id: this.user.userId,
						type: ccc,
						start: this.start,
						end: this.end
					},
					method: 'GET',
					success: (res) => {
						this.Lifepayhistory = res.data.data.lifepayhistory
						this.start = ''
						this.end = ''
					}
				})
			},
			eee(data) {
				if (data.value[0].label === '所有') {
					this.ListAll()
					this.show = false
				} else {
					this.ListAll(data.value[0].label)
					this.show = false
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
	/** 全局样式-开始,建议放在公共css样式文件中,比如common.css 或app.vue文件 */

	html,
	body {
		margin: 0;
		width: 100%;
		height: 100%;
		font-size: 16px
	}

	view,
	text,
	image {
		position: relative;
		box-sizing: border-box;
		flex-shrink: 0;
	}

	.flex-col {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
	}

	.flex-row {
		display: flex;
		align-items: flex-start;
	}

	.flex-col .flex-row {
		width: 100%
	}

	/** 全局样式-结束*/

	.homepage {
		padding: 80rpx 0rpx 800rpx 39rpx;
		background-color: #dbf1e1;

		.wrapper {
			width: 186rpx;
			height: 50rpx;
			justify-content: space-between;
			margin-bottom: 60rpx;
			padding: 4rpx 16rpx 0rpx 22rpx;
			border-width: 2rpx;
			border-color: rgba(194, 194, 194, 1);
			border-radius: 40rpx;
			background: rgba(188, 209, 255, 1);

			.text {
				width: 116rpx;
				font-size: 28rpx;
				font-weight: 600;
				color: rgba(64, 124, 252, 1);
			}

			.wraper-col {
				width: 32rpx;
				height: 24rpx;
				border-color: #030303;
			}
		}

		.wrapper1 {
			width: 186rpx;
			height: 50rpx;
			margin-top: -110rpx;
			margin-left: 230rpx;
			justify-content: space-between;
			margin-bottom: 60rpx;
			padding: 4rpx 16rpx 0rpx 22rpx;
			border-width: 2rpx;
			border-color: rgba(194, 194, 194, 1);
			border-radius: 40rpx;
			background: rgba(188, 209, 255, 1);

			.text {
				width: 116rpx;
				font-size: 28rpx;
				font-weight: 600;
				color: rgba(64, 124, 252, 1);
			}

			.wraper-col {
				width: 32rpx;
				height: 24rpx;
				border-color: #030303;
			}
		}

		.wrapper-two {
			width: 664rpx;
			margin: 1rpx 0rpx 30rpx 10rpx;
			padding: 39rpx 0rpx 32rpx 20rpx;
			border-width: 2rpx;
			border-radius: 10rpx;
			background: #f3f4f6;

			.wraper-col-two {
				width: 60rpx;
				height: 60rpx;
				margin: 14rpx 30rpx 0rpx 0rpx;
				border-color: rgba(96, 96, 96, 1);
				border-radius: 60rpx;
				background: #71d5a1;

			}

			.wraper-col-three {
				width: 146rpx;
				margin-right: 22rpx;

				.text-two {
					width: 130rpx;
					margin: 0rpx 0rpx 18rpx 0rpx;
					font-size: 32rpx;
					font-weight: 600;
					color: rgba(149, 149, 149, 1);
				}

				.text-three {
					width: 100%;
					font-size: 24rpx;
					font-weight: 600;
					color: rgba(181, 181, 181, 1);
				}
			}

			.text-four {
				width: 168rpx;
				margin: 63rpx 74rpx 0rpx 0rpx;
				font-size: 24rpx;
				font-weight: 600;
				color: rgba(181, 181, 181, 1);
			}

			.text-five {
				width: 126rpx;
				font-size: 32rpx;
				font-weight: 600;
				color: rgba(255, 75, 75, 1);
			}
		}
	}
</style>
